<template>
  <view class="section">
    <template v-if="!isShowAnswer">
      <view class="top">
        <view class="progress">
          <view class="progress_text"> 单词听写中 </view>
          <u-line-progress
            active-color="#eebe3d"
            inactive-color="#333"
            :percent="percent"
            :show-percent="false"
            :height="20"
            :striped-active="true"
          ></u-line-progress>
        </view>
        <view class="num">{{ currentIndex + 1 }}/{{ wordList.length }}</view>
        <view class="time">
          <image src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/time.png" mode="scaleToFill" />
          <u-count-down
            ref="uCountDown"
            :timestamp="timestamp"
            format="HH:mm"
            :show-hours="false"
            font-size="28"
            bg-color="rgba(0, 0, 0, 0)"
            color="#0C8DCB"
            @end="handleTimeEnd"
          ></u-count-down>
        </view>
      </view>
      <view class="info">
        <view class="word">
          <view class="word_btn">
            <text @click="wordParaphraseSwitch()" v-show="!isShowWordParaphrase"
              >显示词义</text
            >
            <text @click="wordParaphraseSwitch()" v-show="isShowWordParaphrase"
              >隐藏词义</text
            >
          </view>
          <view class="word_text" v-show="isShowWordParaphrase">
            {{ wordData.wordParaphrase }}
          </view>
        </view>
        <view class="operate">
          <view class="icon">
            <view class="icon_content" @click="prev()">
              <image src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/prev.png" mode="scaleToFill" />
            </view>
            <view class="icon_content" @click="play()">
              <image
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/suspend.png"
                mode="scaleToFill"
              />
            </view>
            <view class="icon_content" @click="next()">
              <image src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/next.png" mode="scaleToFill" />
            </view>
          </view>
          <view
            class="submit"
            @click="submit()"
            v-if="currentIndex === wordList.length - 1"
          >
            <text>提交</text>
          </view>
        </view>
      </view>
    </template>
    <template v-else>
      <view class="top">
        <view class="duration">
          用时：{{ Math.floor(duration / 60) }}分{{ duration % 60 }}秒
        </view>
        <view class="tabs">
          <view
            class="tabs_item"
            v-for="(item, index) in resultList"
            :key="index"
            :class="{
              active: index === currentResultIndex,
            }"
            @click="handleChangeResult(index)"
          >
            <view class="tabs_text"> {{ item.name }} </view>
            <view class="tabs_num">
              <text>{{ item.num }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="list">
        <view class="list_content">
          <view
            class="list_item"
            v-for="(item, index) in resultList[currentResultIndex].list"
            :key="index"
          >
            <text>{{ item.rightAnswer }}</text>
            <view class="list_icon">
              <image
                v-if="item.right"
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/dui.png"
                mode="heightFix"
              />
              <image
                v-else
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/cuo.png"
                mode="heightFix"
              />
            </view>
          </view>
        </view>
      </view>
      <view class="btn">
        <view class="btn_content" @click="learnWrongWord()" v-if="errorNum">
          <text>错词学习</text>
        </view>
        <view class="btn_content" @click="reLearn()">
          <text>重新听写</text>
        </view>
        <view class="btn_content" @click="confirm()">
          <text>下一步</text>
        </view>
      </view>
    </template>
    <u-popup
      class="custom-popup"
      v-model="show1"
      :zoom="false"
      mode="center"
      width="830rpx"
      height="998rpx"
      :mask-close-able="false"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <view class="mask1">
        <view class="mask1_title">
          恭喜你已经完成本轮单词学习<br />请准备好纸和笔开始进行AI听写测试
        </view>
        <view class="mask1_text">
          <text style="color: #080808">完成测试赢</text>
          <text style="color: #c8123d">{{ wordList.length }}枚</text>
          <text style="color: #1775ff">金币</text>
        </view>
        <view class="mask_btn">
          <view @click="startTesting()">
            <text>开始测试</text>
          </view>
          <view @click="back()">
            <text>暂不测试</text>
          </view>
        </view>
      </view>
    </u-popup>
    <u-popup
      class="custom-popup"
      v-model="show2"
      :zoom="false"
      mode="center"
      width="758rpx"
      height="804rpx"
      :mask-close-able="false"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <view class="mask2">
        <view class="mask2_title"> 听写结束了，快来检查一下吧~ </view>
        <view class="mask2_content" @click="upload()">
          <text>拍照批改</text>
        </view>
      </view>
    </u-popup>
    <u-popup
      class="custom-popup"
      v-model="show3"
      :zoom="false"
      mode="center"
      width="829rpx"
      height="862rpx"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <view class="mask3">
        <view class="mask3_content">
          <view class="mask3_text"> 本次听写正确{{ rightNum }}个</view>
          <view class="mask3_text">恭喜获得</view>
          <view class="mask3_num"> {{ gold }}枚金币 </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { csWord } from "@/api/sync";
const englishAudioContext = uni.createInnerAudioContext();
englishAudioContext.autoplay = true;
export default {
  components: {},
  props: {
    chapterId: {
      type: String,
      default: "",
    },
    wordList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      isShowWordParaphrase: true,
      currentIndex: 0,
      timestamp: 0,
      duration: 0,
      interval: 10,
      wordStr: "",
      isShowAnswer: false,
      resultList: [],
      currentResultIndex: 0,
      gold: 0,
      rightList: [],
      rightNum: 0,
      errorList: [],
      errorNum: 0,
      show1: true,
      show2: false,
      show3: false,
    };
  },
  computed: {
    percent() {
      return parseInt((this.currentIndex / this.wordList.length) * 100);
    },
    wordData() {
      return this.wordList[this.currentIndex] || {};
    },
  },
  mounted() {},
  methods: {
    startTesting() {
      this.show1 = false;
      this.initData();
    },
    initData() {
      this.timestamp = this.wordList.length * this.interval;
      this.timer();
    },
    timer() {
      this.timerId = setInterval(() => {
        if (this.currentIndex === this.wordList.length - 1) return;
        this.currentIndex++;
      }, this.interval * 1000);
    },
    handleTimeEnd() {
      this.getDuration();
      clearInterval(this.timerId);
      this.show2 = true;
    },
    prev() {
      if (this.currentIndex === 0) return;
      this.currentIndex--;
      clearInterval(this.timerId);
      this.timer();
    },
    next() {
      if (this.currentIndex === this.wordList.length - 1) return;
      this.currentIndex++;
      clearInterval(this.timerId);
      this.timer();
    },
    submit() {
      this.getDuration();
      this.show2 = true;
    },
    getDuration() {
      this.duration = this.timestamp - this.$refs.uCountDown.seconds;
    },
    play() {
      if (!englishAudioContext.paused) return;
      englishAudioContext.src = this.wordData.wordAudio;
      englishAudioContext.play();
    },
    wordParaphraseSwitch() {
      this.isShowWordParaphrase = !this.isShowWordParaphrase;
    },
    //上传图片
    upload() {
      uni.chooseImage({
        // 从本地相册选择图片或使用相机拍照。
        count: 1, //默认选择1张图片
        sizeType: ["original", "compressed"], //original 原图，compressed 压缩图，默认二者都有
        success: (response) => {
          //成功则返回图片的本地文件路径列表 tempFilePaths
          this.$upload(response.tempFilePaths[0], null, "/admin/util/ocr").then(
            (res) => {
              this.wordStr = res.data;
              this.uploadWord();
            }
          );
        },
      });
    },
    uploadWord() {
      let params = {
        answers: this.wordList.map((item) => ({ id: item.id })),
        chapterId: this.chapterId,
        ocrWordStr: this.wordStr,
        type: "dclx",
      };
      csWord(params).then((res) => {
        this.gold = res.data.gold;
        let answers = res.data.answers;
        this.rightList = answers.filter((item) => item.right === true);
        this.rightNum = this.rightList.length;
        this.errorList = answers.filter((item) => item.right === false);
        this.errorNum = this.errorList.length;
        this.resultList = [
          {
            name: "总体情况",
            num: answers.length,
            list: answers,
          },
          {
            name: "正确",
            num: this.rightList.length,
            list: this.rightList,
          },
          {
            name: "错误",
            num: this.errorList.length,
            list: this.errorList,
          },
        ];
        this.show2 = false;
        this.show3 = true;
        this.isShowAnswer = true;
      });
    },
    handleChangeResult(index) {
      if (this.currentResultIndex === index) return;
      this.currentResultIndex = index;
    },
    learnWrongWord() {
      this.$emit("learn", this.errorList);
    },
    reLearn() {
      this.currentIndex = 0;
      this.isShowAnswer = false;
      this.$nextTick(() => {
        this.$refs.uCountDown.start();
      });
    },
    confirm() {
      this.$emit("confirm", "6");
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./WordStep6";
</style>
